import { DeepKeys, FormAsyncValidateOrFn, FormValidateOrFn, ReactFormExtendedApi } from '@tanstack/react-form'
import { Ref, useImperativeHandle, useRef } from 'react'
import { FieldValidate } from '../common/FieldValidate'
import { Input } from '../ui/input'
import { Label } from '../ui/label'
export type ICaptchaRef = { refresh: () => void }
interface Props<T> {
  formObject: ReactFormExtendedApi<
    T,
    FormValidateOrFn<T> | undefined,
    FormValidateOrFn<T> | undefined,
    FormAsyncValidateOrFn<T> | undefined,
    FormValidateOrFn<T> | undefined,
    FormAsyncValidateOrFn<T> | undefined,
    FormValidateOrFn<T> | undefined,
    FormAsyncValidateOrFn<T> | undefined,
    FormAsyncValidateOrFn<T> | undefined,
    unknown
  >
  fieldName: DeepKeys<T>
  label?: string
  [key: string]: any
  ref: Ref<ICaptchaRef>
}

export const BmCaptcha = <T extends object>({ formObject, label, ref, fieldName }: Props<T>) => {
  const imgRef = useRef<HTMLImageElement | null>(null)
  useImperativeHandle(ref, () => {
    return {
      refresh: () => {
        if (imgRef.current) imgRef.current.src = '/captcha/math?' + Math.random()
      }
    }
  })
  return (
    <formObject.Field
      name={fieldName}
      children={(field) => (
        <main>
          {label && (
            <Label htmlFor={field.name} className="mb-2">
              {label}
            </Label>
          )}
          <div className="grid grid-cols-[1fr_auto] gap-1">
            <Input
              placeholder="请输入验证码"
              onChange={(e) => {
                field.handleChange(e.target.value as any)
              }}
            />
            <img
              src="/captcha/math"
              ref={imgRef}
              className="rounded-sm cursor-pointer border"
              onClick={(e) => {
                e.currentTarget.src = '/captcha/math?' + Math.random()
              }}
            />
          </div>
          <FieldValidate name={field.name} errors={field.state.meta.errors} />
        </main>
      )}
    />
  )
}
